<template>
    <div class="weitao">
        <!-- vant 下拉加载 -->
        <!--     
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <p>刷新次数: {{ count }}</p>
            <template v-for="n in total">
                <p :key="n">{{n}}</p>
            </template>
        </van-pull-refresh>
        -->

        <!-- vue-scroller -->
        <!-- 
        <scroller style="top: 0;" :on-refresh="refresh" :on-infinite="infinite" noDataText="~~到底啦~~" ref="my_scroller">
            <template v-for="n in total">
                <p :key="n">{{n}}</p>
            </template>
        </scroller> 
        -->

        <van-button type="primary" @click="handlerPay">微信支付</van-button>

    </div>
</template>

<script>
import { PullRefresh, Toast, Button } from "vant";
import { toPay } from "@/libs/weixin";
import http from '@/libs/http'

export default {
    name: "Weitao",
    components: {
        [PullRefresh.name]: PullRefresh,
        [Toast.name]: Toast,
        [Button.name]: Button
    },
    data() {
        return {
            count: 0,
            isLoading: false,
            total: 110
        };
    },

    methods: {
        //微信支付
        handlerPay() {
            let data = {
                'body': '测试支付', //商品描述
                'detail': '测试支付详情',   //商品详情
                'totalFee': 1,  //订单总金额，单位为分
                'outTradeNo': '2018101500001', //商户订单号
                //'tradeType': 'JSAPI',   //交易类型，取值如下：JSAPI，NATIVE，APP
                'openid': 'oIsgAtAPjJ-8GvUXljx_EB7yqbpc'    //用户标识
            };
            toPay(data)

            //this.toPay();
        },

        //1：预支付交易会话
        toPay() {
            console.log('2：预支付交易会话')
            let data = {
                'body': '测试支付', //商品描述
                'detail': '测试支付详情',   //商品详情
                'totalFee': 1,  //订单总金额，单位为分
                'outTradeNo': '2018101500001', //商户订单号
                'tradeType': 'JSAPI',   //交易类型，取值如下：JSAPI，NATIVE，APP
                'openid': 'oIsgAtAPjJ-8GvUXljx_EB7yqbpc'    //用户标识
            };

            http({
                url: '/weixin/pay/createOrder',
                method: 'post',
                data
            }).then((response) => {
                console.log(response.data)
                //调起微信支付
                this.onBridgeReady(response.data)
            })
        },
        //2：调起微信支付
        onBridgeReady(result) {
            console.log('3：调起微信支付')
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": result.appId,
                    "timeStamp": result.timeStamp,
                    "nonceStr": result.nonceStr,
                    "package": result.packageValue,
                    "signType": result.signType,
                    "paySign": result.paySign
                },
                function (res) {
                    console.log('微信支付结果：', res)
                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        this.$toast("支付成功");
                    } else if(res.err_msg == "get_brand_wcpay_request:cancel" ) {
                        this.$toast("用户取消支付");
                    }
                }
            );
        },


        onRefresh() {
            //vant下拉加载
            setTimeout(() => {
                this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;
                this.total += this.total;
            }, 500);
        },

        //vue-scroller 下拉加载
        refresh(done) {
            setTimeout(() => {
                done();
            }, 1500);
        },
        //vue-scroller 上拉刷新
        infinite(done) {
            setTimeout(() => {
                if (this.count < 3) {
                    this.count++;
                    this.total = 100 * this.count;
                    done();
                } else {
                    //停止加载
                    this.$refs.my_scroller.finishInfinite(true);
                }
            }, 1000);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.weitao {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>